<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>脚本监控程序</title>
    <link rel="stylesheet" href="{{ url_for('webapp.static',filename='css/layui.css') }}" />
    <link rel="stylesheet" href="{{ url_for('webapp.static',filename='webfont/css/font-awesome.min.css') }}" />
    <script type="text/javascript" src="{{url_for('webapp.static', filename='jquery-1.8.3.min.js')}}"></script>
    <script type="text/javascript" src="{{url_for('webapp.static', filename='layui.js')}}"></script>
    <script type="text/javascript" src="{{url_for('webapp.static', filename='func.js')}}"></script>
    <style>
        body{background:#000;}
        #tasklist .taskitem{background:#fff;overflow:hidden;}
        #tasklist .taskitem .task-status{display:block;height:28px;line-height:28px;color:#dcdfe3;font-size:13px;background:#33465f;padding:0 10px;}
        #tasklist .taskitem .task-status .interval{float:left;margin-right:50px;}
        #tasklist .taskitem .task-status .nexttime{float:left;}
        #tasklist .taskitem .task-status .status{float:right;}
        #tasklist .taskitem .task-clear{float:none;clear:both;}
        #tasklist .taskitem .task-info{width:220px;min-height:160px;float:left;overflow:hidden;margin:10px;color:#666;background:#f6f6f6;}
        #tasklist .taskitem .task-logs{width:300px;float:right;margin-right:10px;}
        #tasklist .taskitem .task-logs .logstatus{cursor:pointer;}
        #tasklist .taskitem .task-info .task-info-title{font-size:16px;color:#fff;height:30px;line-height:30px;font-weight:666;display:block;background:#59b1f0;padding:0 10px;}
        #tasklist .taskitem .task-info .task-info-remark{font-size:14px;line-height:28px;margin:10px;}
    </style>
</head>
<body>
<div class="layui-container">
    <div id="tasklist" class="layui-row layui-col-space20" style="background:#efefef;margin:20px auto;">
        <div class="layui-col-md6">
            <div class="task-status">
                <span class="nexttime"></span>
                <span class="status"></span>
            </div>
            <div class="task-clear"></div>
            <div class="task-info">
                <div class="task-info-title"></div>
                <div class="task-info-remark"></div>
            </div>
            <div class="task-logs"></div>
        </div>
    </div>
</div>
<div style="display:none;"><audio id="alert" src="{{url_for('webapp.static', filename='alert.mp3')}}"></audio></div>
<script>
    var taskids = {};
    layui.use(['jquery','laytpl','layer'],function(){
        var laytpl = layui.laytpl;
        var $ = layui.jquery;
        var layer = layui.layer;

        $.getloglist = function(taskid){
            $.post('{{url_for('webapp.tasklogs')}}?tid='+taskid+'&t='+new Date().getTime(),function(data){
                var loglist = data.list;
                var html = '<table class="layui-table" lay-size="sm"><colgroup><col width="50"><col width="120"><col></colgroup><thead><tr><th>序号</th><th>时间</th><th>状态</th></tr></thead><tbody>';
                var currstatus = '';
                for(var i=0;i<loglist.length;i++){
                    var log = loglist[i];
                    html += '<tr>';
                    html += '<td class="logindex">'+(i+1)+'</td>';
                    html += '<td class="logtime">'+log.addtime+'</td>';
                    if(i == 0){
                        currstatus = log.status;
                        if(currstatus != '正常'){
                            currstatus = '<font color="yellow">'+currstatus+'</font>';
                            $.alert();
                        }
                    }
                    if(log.status != '正常')
                        log.status = '<font color="red">'+log.status+'</font>';
                    logid = "log_"+log.id;
                    html += '<td class="logstatus" onclick="$.showerror(\''+logid+'\')" id="'+logid+'">'+log.status+'<span style="display:none">'+log.log+'</span></td>';
                    html += '</tr>';
                }
                html += '</tbody></table>';
                $("#task"+taskid+" .task-status .status").html(currstatus);
                $("#task"+taskid+" .task-status .status").html(currstatus);
                $("#task"+taskid+" .task-logs").html(html);
            });
        };

        $.showerror = function(id){
            var msg = $("#"+id+" span").text();
            var icon = 2;
            if(msg.length==0){
                msg = '正常';
                icon = 6;
            }
            layer.alert(msg, {icon: icon});
        }

        $.gettasklist = function(){
            $.post('{{url_for('webapp.tasklist')}}',function(data){
                var runnings = {};
                var tasklist = data.list;
                for(var i=0;i<tasklist.length;i++){
                    var task = tasklist[i];
                    var key = 'task'+task.id;
                    runnings[key] = 1;
                    if( taskids[key] == undefined ){
                        taskids[key] = task;
                        var html = '<div class="layui-col-md6" id="'+key+'"><div class="taskitem"><div class="task-status"><span class="interval">每 '+task.interval+' 分钟执行一次</span><span class="nexttime"></span><span class="status">正常</span></div><div class="task-clear"></div><div class="task-info"><div class="task-info-title">'+task.title+'</div><div class="task-info-remark">'+task.remark+'</div></div><div class="task-logs"></div></div></div>';
                        $("#tasklist").prepend(html);
                    }
                    var oldtime = $('#'+key+" .task-status .nexttime").html();
                    if(oldtime != '下次执行时间：'+task.nexttime){
                        $.getloglist(task.id);
                        $('#'+key+" .task-status .nexttime").html('下次执行时间：'+task.nexttime);
                    }
                }
                for(var key in taskids){
                    if(runnings[key] == undefined)
                    {
                        delete taskids[key];
                        $('#'+key).remove();
                    }
                }
            });
        };

        $.alert = function(){
            var audioEle = document.getElementById("alert");
            audioEle.load();
            if (audioEle.paused){ /*如果已经暂停*/
                audioEle.play();   //播放
            }else {
                audioEle.pause();  //暂停
            }
        }
        setInterval(function(){
            $.gettasklist();
        },1000);

    })
</script>

</body>
</html>